<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>勾选状态</title>
  </head>
  <body>
    <div>
      <input type="checkbox" />
      <span>我已阅读并同意用户注册协议</span>
    </div>
    <!-- disabled: 不可用 -->
    <button disabled>提交注册</button>

    <script>
      // 监听: 勾选框的 `变` 化事件:  change
      const chb = document.querySelector('input')
      console.log(chb)
      const btn = document.querySelector('button')
      console.log(btn)

      chb.onchange = function () {
        console.dir(this) // 属性 checked 代表是否勾选
        console.log(this.checked)

        // 不可用: 真-代表不可用    假-代表可用
        // 勾选: checked是真, 不可用为假;   不勾选: checked是假, 不可用是真
        btn.disabled = !this.checked

        // 逻辑运算符
        // 逻辑非 !  逻辑或 ||   逻辑与 &&
        // 非真为假, 非假为真 -- 取反

        // 如果用 div + 样式来做按钮,  用toggle 切换样式即可
      }
    </script>
  </body>
</html>
